<template>
  <div class="query-com">
    <!-- 请求参数tab -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Params" name="Params">
        <paramsTable
          :data="data"
          :editor="editor"
          :isenable="isenable"
          @params-value="(val) => handleValue('params', val)"
        />
      </el-tab-pane>
      <el-tab-pane label="Body" name="Body">
        <el-radio-group v-model="bodyMethod" size="small" @change="changeMethod">
          <el-radio-button label="none" value="none" />
          <!-- <el-radio-button label="form-data" value="form-data" /> -->
          <el-radio-button label="x-www-form-urlencoded" value="x-www-form-urlencoded" />
          <el-radio-button label="json" value="json" />
          <el-radio-button label="xml" value="xml" />
          <el-radio-button label="text" value="text" />
        </el-radio-group>
        <bodyFormData
          :editor="editor"
          :isenable="isenable"
          v-show="bodyMethod == 'form-data' || bodyMethod == 'x-www-form-urlencoded'"
          :data="data"
          @body-form-value="(val) => handleValue('bodyForm', val)"
        />
        <bodyJSON
          v-show="bodyMethod == 'json'"
          :data="data"
          @json-value="(val) => handleValue('json', val)"
        />
        <bodyXML
          v-show="bodyMethod == 'xml'"
          :data="data"
          @json-value="(val) => handleValue('json', val)"
        />
        <bodyText
          v-show="bodyMethod == 'text'"
          :data="data"
          @json-value="(val) => handleValue('json', val)"
        />
        <el-empty
          :image-size="50"
          description="该请求没有 Body 体"
          v-if="['none'].includes(bodyMethod)"
        />
      </el-tab-pane>
      <el-tab-pane label="Headers" name="Headers">
        <headerTable
          :editor="editor"
          :isenable="isenable"
          :data="data"
          @headers-value="(val) => handleValue('headers', val)"
        />
      </el-tab-pane>
      <!-- <el-tab-pane label="Cookies" name="Cookies">
        <cookie :editor="editor" :isenable="isenable" :data="data" @cookie-value="(val) => handleValue('cookies', val)" />
      </el-tab-pane> -->
      <el-tab-pane label="Auth" name="Auth" v-if="editor === true">
        <el-form :model="form" style="max-width: 600px" label-width="100">
          <el-form-item label="认证方式">
            <el-select v-model="form.authMethod" @change="changeAuthMethod">
              <el-option label="No Auth" value="No Auth" />
              <!-- <el-option label="API Key" value="API Key" /> -->
              <el-option label="Bearer Token" value="Bearer Token" />
              <!-- <el-option label="Basic Auth" value="Basic Auth" /> -->
            </el-select>
          </el-form-item>
          <el-form-item label="Token" v-if="['Bearer Token'].includes(form.authMethod)">
            <el-input v-model="form.token" @change="changeToken" spellcheck="false" />
          </el-form-item>
          <template v-if="['API Key'].includes(form.authMethod)">
            <el-form-item label="添加位置">
              <el-select v-model="form.position">
                <el-option label="Header" value="Header" />
                <el-option label="Query Params" value="Query Params" />
              </el-select>
            </el-form-item>
            <el-form-item label="Key">
              <el-input v-model="form.key" />
            </el-form-item>
            <el-form-item label="Value">
              <el-input v-model="form.value" />
            </el-form-item>
          </template>
          <template v-if="['Basic Auth'].includes(form.authMethod)">
            <el-form-item label="Username">
              <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="Password">
              <el-input v-model="form.password" />
            </el-form-item>
          </template>
        </el-form>
        <el-empty
          :image-size="50"
          description="无认证方式"
          v-if="['No Auth'].includes(form.authMethod)"
        />
      </el-tab-pane>
      <!-- <el-tab-pane label="前置" name="frond" v-if="editor === true">
        <preOperation @pre-value="(val) => handleValue('pre', val)" :data="data"/>
      </el-tab-pane> -->
      <el-tab-pane label="后置" name="back">
        <postOperation
          @post-value="(val) => handleValue('post', val)"
          :data="data"
          :editor="editor"
          :id="id"
        />
      </el-tab-pane>
    </el-tabs>
    <multipleEdit ref="multipleEditRef" />
  </div>
</template>

<script setup lang="ts">
import multipleEdit from '../debug/dialog/MultipleEdit.vue'
import paramsTable from '../request/paramsTable.vue'
import bodyFormData from '../request/bodyFormData.vue'
import headerTable from '../request/headerTable.vue'
import bodyJSON from '../request/bodyJSON.vue'
import bodyXML from '../request/bodyXML.vue'
import bodyText from '../request/bodyRaw.vue'
import cookie from '../request/cookie.vue'
import preOperation from '../request/preOperation.vue'
import postOperation from '../request/postOperation.vue'
import { propTypes } from '@/utils/propTypes'
const activeName = ref('Params')
const multipleEditRef = ref() // 批量编辑弹窗ref
const bodyMethod = ref('none') // body下多种type选择
// 认证使用的表单，多种形式
const form = reactive({
  authMethod: 'No Auth',
  token: '',
  key: '',
  value: '',
  position: '',
  username: '',
  password: ''
})
const props = defineProps({
  id: propTypes.string.def(''),
  data: propTypes.object.def({}),
  editor: propTypes.bool.def(),
  isenable: propTypes.bool.def()
})
/** 向上传递请求参数变量 */
const queryComValue = {} as any
const emit = defineEmits(['queryComValue'])
/**
 * 存储requestContentType
 * */
const changeMethod = () => {
  queryComValue.requestContentType = bodyMethod.value
  emit('queryComValue', queryComValue)
}
/**
 * token输入后存储到变量
 * */
const changeToken = (token) => {
  queryComValue.auth = token.trim()
  emit('queryComValue', queryComValue)
}
/**
 * 请求参数、token、cookie等输入后存储到变量
 * */
const handleValue = (type, data) => {
  queryComValue[type] = data
  emit('queryComValue', queryComValue)
}
/**
 * tab页签切换
 * */
const handleClick = () => {}
/** 认证方式改变 */
const changeAuthMethod = (val) => {
  if (val != 'Bearer Token') {
    queryComValue.auth = ''
    form.token = ''
    emit('queryComValue', queryComValue)
  }
}
const init = () => {
  bodyMethod.value = props.data.requestContentType?.toLowerCase() || 'none'
  queryComValue.requestContentType = bodyMethod.value
  if (props.data.auth) {
    form.authMethod = 'Bearer Token'
    form.token = props.data.auth
    queryComValue.auth = props.data.auth
  } else {
    queryComValue.auth = ''
    form.token = ''
    form.authMethod = 'No Auth'
  }
  emit('queryComValue', queryComValue)
}
watch(
  () => props.data,
  (newVal, oldVal) => {
    if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
      init()
    }
  },
  {
    deep: true
  }
)
onMounted(() => {
  init()
})
</script>

<style scoped>
:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}
</style>
